<template>
  <div class="app-container" v-loading.fullscreen.lock="fullscreenLoading">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="status">
        <KiSelect
          v-model="list.filter.status"
          :options="dict.suggestion_status"
          placeholder="回复状态"
        />
      </el-form-item>
      <el-form-item prop="endTime" label="提交时间：">
        <TimeRangePicker
          :start.sync="list.filter.startTime"
          :end.sync="list.filter.endTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <auth-button
          @click="getProperty"
          name="设置每日反馈次数"
          type="primary"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column label="反馈用户" align="center" prop="userName" />
      <el-table-column label="回复状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="replyStatus[row.status]">
            {{ row.status | $value2label(dict['suggestion_status']) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="suggestionTime" />
      <el-table-column label="回复时间" align="center" prop="replyTime" />
      <el-table-column label="回复人" align="center" prop="replyUserName" />
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="r({ id: row.id })" name="查看" />
          <auth-button
            @click="u({ id: row.id })"
            name="回复"
            circle
            type="primary"
            v-if="row.status === '1'"
          >
            <i class="el-icon-finished"></i>
          </auth-button>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="反馈时间">
          <el-input v-model="form.data.suggestionTime" disabled clearable />
        </el-form-item>
        <el-form-item label="反馈内容">
          <el-input
            v-model="form.data.suggestionContent"
            disabled
            type="textarea"
            :autosize="{ minRows: 3 }"
            clearable
          />
        </el-form-item>
        <el-form-item label="图片">
          <PicViewer :value="form.data.image" />
        </el-form-item>
        <el-form-item label="反馈用户">
          <el-input v-model="form.data.userName" disabled clearable />
        </el-form-item>
        <el-form-item label="联系电话">
          <!-- <el-input v-model="form.data.phone" disabled clearable/> -->
          <el-input
            :value="form.data.phone | desensitization"
            disabled
            clearable
          />
        </el-form-item>
        <el-form-item label="回复内容" prop="replyContent" verify>
          <el-input
            v-model="form.data.replyContent"
            type="textarea"
            :autosize="{ minRows: 3 }"
            :disabled="form.status === 'r'"
            maxlength="500"
            show-word-limit
            clearable
          />
        </el-form-item>
        <template v-if="form.status === 'r'">
          <el-form-item label="回复时间">
            <el-input v-model="form.data.replyTime" disabled clearable />
          </el-form-item>
          <el-form-item label="回复人">
            <el-input v-model="form.data.replyUserName" disabled clearable />
          </el-form-item>
        </template>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'one-travel-api/suggestion',
        axiosConfig: {
          u: {
            url: 'dealWith'
          }
        },
        list: {
          filter: {
            status: null,
            startTime: '',
            endTime: ''
          }
        }
      },
      {
        formTitleHash: {
          c: '新增',
          r: '查看',
          u: '回复'
        }
      }
    ),
  data () {
    return {
      replyStatus: ['', 'danger', 'success'],
      property: 3,
      fullscreenLoading: false
    }
  },
  watch: {
    'row.show' (n) {
      if (!n) {
        this.getMsg()
      }
    }
  },
  created () {
    if (this.$route.query.status) {
      setTimeout(() => {
        this.list.filter.status = '1'
      }, 300)
    }
  },
  methods: {
    ...mapActions({
      getMsg: 'user/getMsg'
    }),
    submit () {
      this.form.data = {
        id: this.form.data.id,
        replyContent: this.form.data.replyContent
      }
      return this.submitForm()
    },
    getProperty () {
      this.fullscreenLoading = true
      this.$POST('one-travel-api/property/getValue', {
        id: 'SUGGESTION_LIMIT'
      })
        .then(res => {
          if (res.errorCode == '00000') {
            this.property = +res.data
            this.frequency()
          } else {
            this.$swal.error(res.message)
          }
        })
        .finally(() => {
          this.fullscreenLoading = false
        })
    },
    frequency () {
      this.$prompt('每日可投诉次数', '设置每日反馈次数', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.property,
        closeOnClickModal: false,
        inputValidator (val) {
          let value = +val
          if (isNaN(value)) {
            return '请输入正确的数字'
          } else if (value % 1 > 0 || value < 1 || value > 10) {
            return '请输入小于10的正整数'
          } else {
            return true
          }
        }
      }).then(({ value }) => {
        this.$POST('one-travel-api/property/setValue', {
          k: 'SUGGESTION_LIMIT',
          v: value
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('设置成功')
            this.property = value
          } else {
            this.$swal.error(res.message)
          }
        })
      })
    }
  },
  filters: {
    desensitization (phone) {
      if (phone && phone.length == 11) {
        // return `${phone.substr(0,3)}****${phone.substring(7)}`
        return phone
      } else {
        return phone
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
